<template>
  <el-container class="box">
    <el-header>
      <el-input
        v-model="key"
        placeholder="请输入您要搜索的信息，如果需要同时搜索多个关键词请用英文分号间隔"
      >
        <!-- @change="getList" -->
        <el-button
          slot="append"
          icon="el-icon-search"
          title="搜索"
          @click.native="getList"
        />
        <!-- @change="getList" -->
        <el-button
          slot="append"
          icon="el-icon-circle-close"
          title="重置"
          @click.native="reload"
        />
      </el-input>
    </el-header>

    <el-main>
      <div class="check1">
        <span>搜索位置:</span>
        <el-radio-group v-model="checkList1">
          <el-radio :label="1">全文</el-radio>
          <el-radio :label="2">标题</el-radio>
          <el-radio :label="3">分类标签</el-radio>
        </el-radio-group>
      </div>
      <div class="check2">
        <span>文件类型:</span>
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkList2" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="check3">
        <!-- <div class="left">
          <span>上传者：</span>
          <el-input
            v-model="inputA"
            placeholder="请输入内容"
          />
        </div> -->
        <div class="right">
          <span>创建时间:</span>
          <el-date-picker
            v-model="listQuery.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
          />
          <span>至</span>
          <el-date-picker
            v-model="listQuery.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
          />
          <!-- <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          /> -->
        </div>
      </div>
      <div class="dropBottom">
        <el-dropdown @command="handleCommand1">
          <span class="el-dropdown-link">
            相关度<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in companyList1"
              :key="item.value"
              :command="item.value"
            >{{ item.name }}</el-dropdown-item>
            <!-- <el-dropdown-item>上升</el-dropdown-item>
            <el-dropdown-item>下降</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand2">
          <span class="el-dropdown-link">
            时间<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in companyList2"
              :key="item.value"
              :command="item.value"
            >{{ item.name }}</el-dropdown-item>
            <!-- <el-dropdown-item>上升</el-dropdown-item>
            <el-dropdown-item>下降</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand3">
          <span class="el-dropdown-link">
            查看次数<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in companyList3"
              :key="item.value"
              :command="item.value"
            >{{ item.name }}</el-dropdown-item>
            <!-- <el-dropdown-item>上升</el-dropdown-item>
            <el-dropdown-item>下降</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-main>
    <el-footer>

      <div
        v-for=" (item,index) in list"
        :key="index"
        class="main"
      >
        <div class="first">
<!--          <img-->
<!--            v-if="item.suffix==='文件夹'"-->
<!--            src="../../../assets/images/Folder-02.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="item.suffix==='docx' || item.suffix==='doc'"-->
<!--            src="../../../assets/images/Word.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="item.suffix==='xlsx' || item.suffix==='xls'"-->
<!--            src="../../../assets/images/Excel.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="['png','jpeg','jpg'].includes(item.suffix)"-->
<!--            src="../../../assets/images/Picture.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="item.suffix==='pdf'"-->
<!--            src="../../../assets/images/PDF.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="item.suffix==='ppt' || item.suffix==='pptx'"-->
<!--            src="../../../assets/images/PPT.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="item.suffix==='txt'"-->
<!--            src="../../../assets/images/TXT.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="['zip','rar','7z'].includes(item.suffix)"-->
<!--            src="../../../assets/images/Zip.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="['mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v'].includes(item.suffix)"-->
<!--            src="../../../assets/images/Video.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-if="['mp3','flac','wav','flac'].includes(item.suffix)"-->
<!--            src="../../../assets/images/Voice.png"-->
<!--          >-->
<!--          <img-->
<!--            v-else-->
<!--            src="../../../assets/images/Unknown.png"-->
<!--          >-->
          <el-link
            v-if="item.suffix !== '文件夹' && item.suffix !== '其他'"
            :href="item.url"
            target="_blank"
            type="primary"
            v-html="item.fileName"
          />
          <el-link
            v-if="(item.suffix === '文件夹' || item.suffix === '其他') && item.type === 'M'"
            :href="'./#/all/overtInfo?gftId='+item.id"
            target="_blank"
            type="primary"
            v-html="item.fileName"
          />
          <el-link
            v-if="(item.suffix === '文件夹' || item.suffix === '其他') && item.type === 'U'"
            :href="'./#/all/myfile?gftId='+item.id"
            target="_blank"
            type="primary"
            v-html="item.fileName"
          />
        </div>
        <div class="second">
          <span>{{ item.createtimeTi | parseTime('{y}-{m}-{d}') }}</span> | 创建者：<span>{{ item.userName }}</span>
        </div>
        <div class="third">
          <span>所在目录：</span>
          <el-link
            :href="'./#/all/overtInfo?gftId='+item.gftId"
            target="_blank"
            type="primary"
            v-html="item.gftName"
          />
        </div>
        <div
          v-show="xsValue === 1"
          class="forth"
        >
          <span>全文：</span>
          <el-link
            :href="item.url"
            target="_blank"
            type="primary"
            style="table-layout: fixed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 20px;"
            v-html="item.content"
          />
        </div>
        <div
          v-show="xsValue === 3"
          class="forth"
        >
          <span>分类标签：</span>
          <span
            v-html="item.fileLabel"
          />
        </div>
      </div>
      <pagination
        v-show="total>-1"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        align="right"
        @pagination="getList"
      />

    </el-footer>
  </el-container>
</template>

<script>

import { searchBmwd, searchGrwd } from '@/api/search'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'App',
  components: { Pagination },
  data() {
    return {
      cities: ['Word', 'Excel', 'PPT', 'PDF', '文本', '图片', '视频', '音频', '其他', '文件夹'],
      checkAll: false,
      isIndeterminate: false,
      checkList1: '', // 搜索位置
      checkList2: [], // 文件类型
      inputA: '', // 上传者输入框
      time: '', // 时间
      screenLoading: false,
      key: '',
      list: [],
      total: 1,
      listQuery: {
        page: 1,
        limit: 10
      },
      menuId: '',
      companyList1: [
        { value: 'asc', name: '上升' },
        { value: 'desc', name: '下降' }
      ],
      companyList2: [
        { value: 'asc', name: '上升' },
        { value: 'desc', name: '下降' }
      ],
      companyList3: [
        { value: 'asc', name: '上升' },
        { value: 'desc', name: '下降' }
      ],
      xsValue: '',
      linkURL: ''
    }
  },
  created() {
    this.menuId = this.$route.query.menuId
    this.getList()
  },
  methods: {
    handleCommand1(command) {
      // this.$message('click on item ' + command)
      this.listQuery.sort = { field: '_score', order: command }
      this.getList()
    },
    handleCommand2(command) {
      // this.$message('click on item ' + command)
      this.listQuery.sort = { field: 'createtimeTi', order: command }
      this.getList()
    },
    handleCommand3(command) {
      // this.$message('click on item ' + command)
      this.listQuery.sort = { field: 'views', order: command }
      this.getList()
    },
    handleCheckAllChange(val) {
      this.checkList2 = val ? this.cities : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    getList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.list = []
      var params = {}
      var param = {}
      var terms = {}

      // if (this.time !== null && this.time.length > 0) {
      //   this.listQuery.beginDate = this.time[0]
      //   this.listQuery.endDate = this.time[1]
      // }

      if (this.checkList1 !== null && this.checkList1 !== undefined && this.checkList1 !== '') {
        this.xsValue = this.checkList1
        terms['radio'] = this.checkList1
      }
      if (this.checkList2 !== null && this.checkList2.length > 0) {
        var dict = ''
        for (var i in this.checkList2) {
          dict = dict + this.checkList2[i]
          if (i < this.checkList2.length - 1) {
            dict = dict + ','
          }
        }
        terms['check'] = dict
      }
      param.terms = terms

      param.page = this.listQuery.page
      param.limit = this.listQuery.limit
      param.key = this.key
      param.type = this.menuId

      for (var key in this.listQuery) {
        if (key === 'sort' || key === 'page' || key === 'limit') {
          continue
        }
        if (this.listQuery[key]) {
          params[key] = this.listQuery[key]
        }
      }
      param.params = params

      var orders = []
      if (this.listQuery.sort !== null && this.listQuery.sort !== undefined && this.listQuery.sort !== '') {
        // var orderBy = { field: 'paixu', order: 'asc' }
        // orders.push(orderBy)
        orders.push(this.listQuery.sort)
        param.orders = orders
      } else {
        var orderBy1 = { field: 'paixu', order: 'asc' }
        var orderBy2 = { field: 'createtimeTi', order: 'desc' }
        orders.push(orderBy1)
        orders.push(orderBy2)
        param.orders = orders
      }

      if (this.menuId === 'M') {
        // 搜索获取数据
        searchBmwd(param).then(response => {
          this.list = response.data.records
          this.total = parseInt(response.data.total)

          loading.close()
        }).catch(response => {
          loading.close()
        })
      } else {
        // 搜索获取数据
        searchGrwd(param).then(response => {
          this.list = response.data.records
          this.total = parseInt(response.data.total)

          loading.close()
        }).catch(response => {
          loading.close()
        })
      }
    },
    reload() {
      this.key = ''
      this.checkList1 = ''
      this.checkAll = false
      this.isIndeterminate = false
      this.checkList2 = []
    }
  }

}
</script>

<style  scoped>
.box {
  height: calc(100vh - 85px);
}
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-header {
  color: #333;
  height: 10% !important;
}
.el-main {
  color: #555555;
  font-size: 14px;
  text-align: center;
  height: 20% !important;
  padding: 0px 20px;
  border-bottom: 1px solid #eeeeee;
}
.el-footer {
  color: #333;
  height: 70% !important;
  overflow-y: auto;
  overflow-x: auto;
}
.el-footer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.el-input-group {
  margin-left: 120px;
  width: 37%;
  margin-top: 25px;
}
.el-input-group >>> .el-input__inner {
  height: 30px;
}
.el-header span {
  text-align: right;
}
.el-main .check1,
.el-main .check2 {
  padding-bottom: 10px;
}
.check1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 65px;
}
.check1 span {
  width: 10%;
  height: 100%;
}
.check1 .el-radio-group {
  flex: 1;
  text-align: left;
  align-items: center;
}
.check1 >>> .el-radio__inner {
  border-radius: 50%;
}
.check1 .el-radio {
  margin-right: 15px;
}
.check2 {
  display: flex;
  justify-items: center;
  align-items: center;
  margin: 0px 65px;
}
.check2 span {
  width: 10%;
}
.check2 .el-checkbox-group {
  flex: 1;
  text-align: left;
}

.check2 .el-checkbox {
  margin-right: 15px;
}
.check3 {
  display: flex;
  justify-items: center;
  align-items: center;
  margin: 0px 65px 0px 65px;
}
.left {
  flex: 1;
  display: flex;
  justify-items: center;
  align-items: center;
}
.left span,
.right span {
  width: 10%;
}
.left .el-input {
  width: 50%;
  text-align: left;
}
.left >>> .el-input__inner {
  height: 30px;
}
.right {
  flex: 1;
  display: flex;
  justify-items: center;
  align-items: center;
}
.right >>> .el-input__inner {
  height: 30px;
}
.el-date-editor >>> .el-range-separator {
  line-height: 25px;
}
.el-date-editor >>> .el-range__icon {
  line-height: 25px;
}
/* 下拉框 */
.dropBottom {
  position: relative;
  top: 10%;
  text-align: left;
  margin-left: 115px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-right: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-footer .main {
  height: 120px;
  margin: 60px 105px 0px 105px;
  border-bottom: 1px solid #eeeeee;
}
.first,
.second,
.third .forth {
  margin-bottom: 10px;
}
.first img {
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.first .el-link.el-link--primary {
  font-size: 17px;
  padding-left: 10px;
}
.second {
  color: #888888;
}
.third span {
  color: #888888;
  font-size: 14px;
}
.forth span {
  color: #888888;
  font-size: 14px;
}
.el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  transition: all 0.3s;
  line-height: 30px;
}
</style>
